<div class="content">
    <div id="example_title">
        <h1>Popup Content</h1>
        You can open popup with content and settings defined in
        <ul>
            <li>JSON structure</li>
            <li>HTML on the page</li>
            <li>in a file</li>
        </ul>
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<button id="popup1" class="w2ui-btn">From JSON</button>
<button id="popup2" class="w2ui-btn">From HTML</button>
<button id="popup3" class="w2ui-btn">From File</button>
<button id="popup4" class="w2ui-btn">From File with options</button>

<div id="tmpl_popup1" style="display: none; width: 600px; height: 400px; overflow: hidden">
    <div rel="title">
        Popup #1 Title
    </div>
    <div rel="body" style="padding: 10px; line-height: 150%">
        <div style="float: left; background-color: white; width: 150px; height: 80px; border: 1px solid silver; margin: 5px;"> </div>
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup #1. You can put any text or HTML inside the body (as well as title and buttons).
    </div>
    <div rel="buttons">
        <button class="w2ui-btn w2ui-action" data-click="close">Close</button>
    </div>
</div>

<!--CODE-->
<script type="module">
import { w2popup, w2utils, query } from '__W2UI_PATH__'

let tmpl_popup1

query('#popup1').on('click', popup1)
query('#popup2').on('click', popup2)
query('#popup3').on('click', popup3)
query('#popup4').on('click', popup4)

function popup1() {
    w2popup.open({
        title:'Popup',
        text: 'from JSON structure'
    })
}

function popup2() {
    if (!tmpl_popup1) {
        /**
         * Remember template in the variable and remove it from the DOM. It is needed so that when popup is inserted, there would not
         * be two copies of same nodes. Otherwise, they overlap and query might return wrong one
         */
        tmpl_popup1 = query('#tmpl_popup1')[0]
        tmpl_popup1.parentNode.removeChild(tmpl_popup1)
    }
    w2popup.template(tmpl_popup1).then(event => {
        w2utils.bindEvents(query('#w2ui-popup .w2ui-action'), w2popup)
    })
}

function popup3() {
    w2popup.load('data/popup1.html').then(event => {
        w2utils.bindEvents(query('#w2ui-popup .w2ui-action'), w2popup)
    })
}

function popup4() {
    w2popup.load({
        url: 'data/popup1.html',
        showMax: true,
        openMaximized: true
    }).then(event => {
        w2utils.bindEvents(query('#w2ui-popup .w2ui-action'), w2popup)
    })
}
</script>
